* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
body {
  background: linear-gradient(to bottom, #1B296F, #05528d);
  min-height: 100vh;
}
.container {
  max-width: 10rem;   
  height: 17.78rem;
  max-height: 17.78rem; /* 1920px / 108 ≈ 17.78rem */
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.37rem;  /* 40px / 108 ≈ 0.37rem */
  box-sizing: border-box;
}
.common-header {
  height: 1.3rem;    /* 140px / 108 ≈ 1.3rem */
  line-height: 1.3rem;
  font-weight: bold;
  text-align: center;
  font-size: 0.55rem; 
  color: rgba(255, 255, 255, 0.87);
  background: url(../images/header_bg.png) no-repeat center center;
  background-size: 100% 100%;
}
.rank-box {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.93rem;  /* 100px / 108 ≈ 0.93rem */
}

.rank-list {
  margin-top: 0.04rem;     /* 4px / 108 ≈ 0.04rem */
  padding: 0 0.19rem 0.19rem 0.19rem;  /* 80px 20px 20px 20px */
  border: 0.02rem solid transparent;          /* 2px / 108 ≈ 0.02rem */
  border-top:0;
  border-image: linear-gradient(45deg, #4D73B2, #7BB6D5) 1;
}
.list-header {
  display: flex;
  align-items: center;
  height: 0.93rem;     /* 100px / 108 ≈ 0.93rem */
  color: #1EB6FF;
  font-size: 0.37rem;  /* 40px / 108 ≈ 0.37rem */
  font-weight: bold;
  letter-spacing: 0.09rem;  /* 10px / 108 ≈ 0.09rem */
}
.item-th {
  text-align: center;
  flex-shrink: 0;
}
.item-th:nth-child(1) {
  width: 40%;
}
.item-th:nth-child(2) {
  width: 20%;
}
.item-th:nth-child(3) {
  width: 20%;
}
.item-th:nth-child(4) {
  width: 20%;
}

.rank-item {
  flex: 1;
  display: flex;
  align-items: center;
    background-color:rgb(0, 131, 222,0.8);
  height: 0.93rem;     /* 100px / 108 ≈ 0.93rem */
  border: 0.02rem solid transparent;    /* 2px / 108 ≈ 0.02rem */
  border-top:0;
  border-right:0;
  border-image: linear-gradient(45deg, #13CBE7, #3A80D6) 1;
  margin-top: 0.19rem; /* 20px / 108 ≈ 0.19rem */
  transition: all 0.6s ease-in-out;
}

.rank-item-td {
  padding: 0 0.09rem;  /* 0 10px / 108 ≈ 0.09rem */
  text-align: center;
  flex-shrink: 0;
  font-size: 0.26rem;  /* 28px / 108 ≈ 0.26rem */
  color: #fff;
  width: 20%;
}
.rank-item-td:nth-child(1) {
  display: flex;
  align-items: center;
  width: 40%;
  padding-left: 0.19rem;
}
.rank-item-td:nth-child(2) {
  width: 20%;
}
.rank-item-td:nth-child(3) {
  width: 20%;
}
.rank-item-td:nth-child(4) {
  width: 20%;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

.rank-number {
  font-size: 0.26rem;  /* 32px / 108 ≈ 0.30rem */
  color: #fff;
  margin-right: 0.19rem;
}
.rank-item-img {
  width: 0.56rem;      /* 60px / 108 ≈ 0.56rem */
  height: 0.65rem;     /* 70px / 108 ≈ 0.65rem */
  margin-right: 0.19rem;  /* 20px / 108 ≈ 0.19rem */
}
.rank-box-bottom {
  margin-bottom: 0;
  flex:1;
}
.rank-box-bottom .rank-list {
  height: calc(100% - 1.3rem);
}

.rank-item-no-img:nth-child(odd) {
  background-color: transparent;
}

.rank-item-no-img .rank-item-name {
  font-size: 0.3rem;  /* 32px / 108 ≈ 0.30rem */
  color: #fff;
}


.slide-out-up {
  transform: translateY(-0.5rem);
  opacity: 0;
}

.slide-in-down {
  transform: translateY(-0.3rem);
  opacity: 0;
}

.slide-in-complete {
  transform: translateY(0);
  opacity: 1;
}